<template>
	<view class="list">
		<view class="top flex_center">
			<view class="top_tittle font28" @click="clickItem">{{ $attrs[field.title] }}</view>
			<view class="list_caoZo" @click="operate" v-if="caoZuo($attrs)">
				<up-icon  size="32rpx" :name="config.getImage('more')"></up-icon>
			</view>
		</view>
		<view style="padding-bottom: 32rpx" @click="clickItem">
			<view class="hones" v-if="field.hones">
				<view style="padding-top: 4rpx">
					<up-icon size="32rpx" :name="config.getImage('hones')"></up-icon>
				</view>
				<view class="text font28">{{ $attrs[field.hones] }}</view>
			</view>
			<view class="facilityStatus" style="margin: 16rpx 0;" v-if="field.facilityStatus">
				<view style="display: flex; align-items: center">
					<view
						class="state_view"
						style="margin-right: 16rpx"
						:class="{ green: $attrs[field.facilityStatus] == 1, red: $attrs[field.facilityStatus] == 3, yellow: $attrs[field.facilityStatus] == 2 }"
					>
						<view class="drop"></view>
						<view class="state font28">{{ $attrs[field.facilityStatus_dictText] }}</view>
					</view>
					<view class="state_view" :class="$attrs[field.enables] == 1?'green':'red'">
						<view class="drop"></view>
						<view class="state font28">{{ $attrs[field.enables] == 1 ? '可用' : '不可用' }}</view>
					</view>
				</view>
			</view>
			<view class="sheshi" v-if="field.facilityType">
				<up-icon size="32rpx" :name="config.getImage('sheshi')"></up-icon>
				<view class="text font28">{{ $attrs[field.facilityType] }}</view>
			</view>
			<view class="ren" v-if="field.chargePerson">
				<up-icon size="32rpx" :name="config.getImage('ren')"></up-icon>
				<view class="text font28">{{ $attrs[field.chargePerson] }}</view>
			</view>
			<view class="phone" v-if="field.phone">
				<up-icon size="32rpx" :name="config.getImage('phone')"></up-icon>
				<view class="text font28">{{ $attrs[field.phone] }}</view>
			</view>
			<view class="address" v-if="field.address">
				<view style="padding-top: 4rpx">
					<up-icon size="32rpx" :name="config.getImage('address')"></up-icon>
				</view>
				<view class="text font28">{{ $attrs[field.address] }}</view>
			</view>
			<view class="time" v-if="field.time">
				<up-icon size="32rpx" :name="config.getImage('time')"></up-icon>
				<view class="text font28">{{ $attrs[field.time] }}</view>
			</view>
			<view class="content" v-if="field.content">
				<view class="text font28">{{ $attrs[field.content] }}</view>
			</view>
			<view class="footer">
				<view class="left" v-if="field.type">
					<image v-if="field.avatar" :src="$attrs[field.avatar]" mode="" style="border-radius: 50%; width: 48rpx; height: 48rpx"></image>
					<up-icon v-else size="32rpx" :name="config.getImage('menu')"></up-icon>
					<view v-if="ziDianList.length" class="type text font28">{{ ziDianList.find((item) => item.value == $attrs[field.type]).name }}</view>
					<view v-else class="type text font28">{{ $attrs.reportStatus ? config.encryptionChange($attrs[field.type]) :$attrs[field.type] }}</view>
				</view>
				<view class="state_view" v-if="field.state" :class="stateData[$attrs[field.state]].className">
					<view class="drop"></view>
					<view class="state font28">{{ stateData[$attrs[field.state]].name }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import config from '@/config.js';
import { usersStore } from 'store/users.js';
const store = usersStore();
const props = defineProps({
	isCaoZuo: {
		type: Boolean,
		default: () => false
	},
	stateData: {
		type: Object,
		default: () => ({
			1: {
				name: '已处理',
				className: 'green'
			},
			2: {
				name: '已处理',
				className: 'red'
			},
			3: {
				name: '上报',
				className: 'blue'
			}
		})
	},
	field: {
		type: Object,
		default: () => ({
			title: 'title',
			address: 'address',
			time: 'time',
			content: 'content',
			type: 'type',
			state: 'state',
			id: 'id'
		})
	},
	ziDianList: {
		type: Array,
		default: () => []
	}
});
const caoZuo = (item) => {
	const { userId, reportStatus } = item;
	if (props.isCaoZuo) {
		return store.isMe(userId);
	} else {
		return !store.isFuJing() && store.isMe(userId) && !reportStatus;
	}
};

const emit = defineEmits(['operate', 'clickItem']);
const operate = () => {
	emit('operate', '点操作了');
};
const clickItem = (id) => {
	emit('clickItem', '点击了');
};
</script>

<style lang="scss" scoped>
.list {
	padding: 32rpx 32rpx 0 32rpx;
	margin-bottom: 28rpx;
	background: #ffffff;
	border-radius: 16rpx;

	.address,
	.sheshi, .phone,.ren,
	.hones, .time,.ownername {
		display: flex;
	}
	.address,.sheshi, .phone,.ren,.ownername,
	.hones, {
		margin: 16rpx 0;
	}
	.text {
		margin-left: 8rpx;
		overflow: hidden;
		-webkit-line-clamp: 2;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}
	.content {
		background: rgba(0, 0, 0, 0.05);
		border-radius: 12rpx;
		padding: 16rpx;
		margin: 32rpx 0;

		.text {
			margin: 0;
		}
	}

	.footer {
		display: flex;
		justify-content: space-between;
		view {
			display: flex;
			align-items: center;
		}
		.left {
			.type {
				color: #222222;
			}
		}
	}
	.top {
		.top_tittle {
			width: 540rpx;
			height: 52rpx;
			font-weight: bold;
			font-size: 36rpx;
			color: #222222;
			line-height: 52rpx;
			text-align: left;
			font-style: normal;
			overflow: hidden;
		}
	}
}
</style>
